{% extends "base.html" %}

{% block breadcrumb %}
    {{ block.super }}
    {% load breadcrumb_tags %}
    {% add_crumb cl 'class_detail' cl.id %}
    {% add_crumb 'Điểm danh' %}
{% endblock %}

{% block content %}
    <script>
        $(document).ready(function() {
            var note = '';

            var done = function(json) {
                if (json.message != null && json.message != '')
                    $("#smsNotification").html("<ul>"+json.message+"</ul>");
                else
                    $("#smsNotification").html('');
                $("#smsNotification").dialog("open");
                $(".selected").each(select);
                $("#selectAll").text("Chọn cả lớp");
            };
            $("#save").attr('disabled',true);
            $("#smsNotification").dialog({
                modal : true,
                buttons: {
                    Đóng: function(){
                        $(this).dialog('close');
                    }
                },
                autoOpen: false,
                width: 500,
                height: 450,
                maxWidth: 500,
                maxHeight: 450,
                title: "Tin nhắn đã gửi"
            })

            var sendSmS = function() {
                var id = $(this).attr('name');
                var select = "tr." + id + " > td:has(select) > select ";
                var loai = $(select).val();
                var data = id + '-' + loai;
                //alert(window.location.pathname);
                var arg = { type:"POST",
                    url:"",
                    data:{data: data, request_type:'sms'},
                    datatype:"json",
                    success:done
                };
                $.ajax(arg);
                return false;
            };

            var sendSelected = function() {

                var data = '';
                $(".selected").each(function() {
                    var id = $(this).attr('class').split(' ')[0];
                    var select = "tr." + id + " > td:has(select) > select ";
                    var loai = $(select).val();
                    var element = id + '-' + loai;
                    data = data + ':' + element;
                });

                var arg = { type:"POST",
                    url:"",
                    data:{data: data, request_type:'sms'},
                    datatype:"json",
                    success:done
                };
                $.ajax(arg);
                return false;
            }
            var select = function() {
                if (!$(this).hasClass('thead')){
                    var id = $(this).attr('class').split(' ')[0];
                    var checkboxid = '#checkbox_' + id;
                    var checkboxall = '#checkbox_all'
                    if ($(this).hasClass('selected')) {
                        $(this).removeClass('selected');
                        $(checkboxid).prop("checked", false);
                        var n = $("input:checked").length;
                        if ( n == 1) $(checkboxall).prop("checked", false);
                    } else {
                        $(this).addClass('selected');
                        $(checkboxid).prop("checked", true);
                        $(checkboxall).prop("checked", true);
                    };
                }
            }

            $(".sms").each(function() {
                $(this).click(sendSmS);
                note = '';
            });

            $("select[name=class_id]").change(function(){
                var class_id = $(this).val()
                url = "/school/diemdanh/" + class_id + "/{{day}}/{{month}}/{{year}}"
                window.location = url
            });
            var update_dd_field= function(json){
                if (json.status == 'true'){
                    var url = "/school/diemdanh/{{class_id}}/" + json.date;
                    window.location = url;
                }
                else{
                    $("#id_date").focus();
                    $("#notify").showNotification("Hãy chọn 1 ngày hợp lệ");
                }
            };
            $("input.datepicker").each(function(){
                $(this).change(function(){
                    var date = $(this).val();
                    var arg = { type:"POST",
                        url:"/school/datecheck",
                        data: {date:date},
                        datatype:"json",
                        success: update_dd_field,
                        global: false
                    };
                    $.ajax(arg);
                });
            });
            $("select[name=loai]").each(function() {
                $(this).change(function() {
                    var id = $(this).parents("tr").attr('class').split(' ')[0];
                    var loai = $(this).val();
                    var data = { id: id, loai:loai, request_type:'update'}
                    var arg = { type:"POST",
                        url:"",
                        data: data,
                        datatype:"json",
                        error: function(){
                            $("#save").attr("disabled", false);
                        }
                    };

                    $.ajax(arg);
                    return false;

                });
            });
            $("tr").each(function() {
                $(this).click(select);
            });
            $("select[name=loai]").click( function (){
                return false;
            });
            $("#checkbox_all").click( function(){
                var checkboxall = '#checkbox_all'
                if($(checkboxall).is(':checked')){
                    $("tr").each( function(){
                        var id = $(this).attr('class').split(' ')[0];
                        var checkboxid = '#checkbox_' + id
                        if (!$(this).hasClass('selected'))
                            $(this).trigger('click');
                    });
                }
                else {
                    $("tr").each( function(){
                        var id = $(this).attr('class').split(' ')[0];
                        var checkboxid = '#checkbox_' + id
                        if ($(this).hasClass('selected'))
                            $(this).trigger('click');
                    });
                }
            });
            $("input.datepicker" ).datepicker( "option", "yearRange", 'c-1:c' );
            $("#sendSelected").click(sendSelected);

            $("#selectAll").click(function() {
                $("tr").each(select);
                alert();
                return false;
            });
            
            $("#submitform").submit(function() {
                var d = $(this).serialize();
                d = d +'&request_type=all';
                var arg = {data: d,
                    type: $(this).attr('method'),
                    url: $(this).attr('action'),
                    success: function(response) {
                        $("#save").attr("disabled", true);
                    }
                };
                $.ajax(arg);
                return false;
            });
        });
    </script>

    <div class="form-inline pagination-centered">
        {% if pos == 3 %}
            <label>Lớp</label> {{cl}}
            <label>ngày</label> {{dncform.date}}
        {% else %}
            {{dncform}}
        {% endif %}

        <div class="btn-toolbar">
                <button id="sendSelected" class="btn btn-danger" title="Gửi SMS cho những học sinh đã chọn">
                    <i class="icon-envelope-alt"></i>  Gửi tin nhắn</button>
                <button id="selectAll" class="btn ">Đảo chọn</button>
        </div>

        {% if message != None %}
            {{ message }}
        {% endif %}
    </div>


    <form id="submitform" action="{% url diem_danh class_id day month year %}" method="post">{% csrf_token %}
        <table class="table">
        <thead>
            <tr class="thead">
                <th>
                    <input type="checkbox" id="checkbox_all"/>
                </th>
                <th >STT</th>
                <th >Họ Tên</th>
                <th >Ngày sinh</th>
                <th >Giới tính</th>
                <th >Điểm danh</th>
                <th >&nbsp</th>
            </tr>
        </thead>
            {% for p,f in list %}
                <tr class="{{p.id}}">
                    <td>
                        <input type="checkbox" id="checkbox_{{p.id}}"/>
                    </td>
                    <td>
                        <p>{{ forloop.counter }}</p>
                    </td>

                    <td >
                        <p>{{ p.last_name }}&nbsp{{ p.first_name }}</p>
                    </td>

                    <td>
                        <p>{{ p.birthday|date:"SHORT_DATE_FORMAT" }}</p>
                    </td>

                    <td>
                        <p>{{ p.sex }}</p>
                    </td>

                    <td class="input-small">
                        {{ f.loai.errors }}
                        {{ f.loai }}
                    </td>
                    <td>
                        <a class="sms btn btn-small" type="submit" name="{{p.id}}">sms</a>
                    </td>
                </tr>
            {% endfor %}
        </table>
    </form>

    {% if pos > 3 %}
        <button id="save" class="btn ">Lưu</button>
    {% endif %}

    <div style="display: None;">
        <div id="smsNotification">
        </div>
    </div>
{% endblock %}